<template>
	<md-check-base-box
		class="md-check-box"
		:label="label"
		:is-checked="isChecked"
		:disabled="disabled"
		@click.native="$_onClick"
	>
		<slot>{{label}}</slot>
	</md-check-base-box>
</template>
<script>
	import CheckBaseBox from 'mand-mobile/components/check-base/box'
	export default {
		name: 'ynet-check-box',
		inheritAttrs: false,
		components: {
			[CheckBaseBox.name]: CheckBaseBox
		},
		props: {
			name: {
				type: String,
				default: ''
			},
			value: {
				type: Array,
				default() {
					return []
				}
			},
			label: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			eq() {
				return this.value.indexOf(this.name)
			},

			isChecked() {
				return this.eq !== -1
			},
			currentIcon() {
				return this.disabled ? this.iconDisabled : this.isChecked ? this.icon : this.iconInverse
			}
		},
		methods: {
			$_onClick() {
				if(this.disabled) {
					return true
				}
				const currentEq = this.eq
				const currentValue = [...this.value]
				if(this.isChecked) {
					currentValue.splice(currentEq, 1)
				}else {
					currentValue.push(this.name)
				}
				this.$emit('input', currentValue)
			}
		}
	}
</script>
<style lang="stylus">
.md-check-box
  position relative
  display inline-block
  text-align center
  color checkbox-color
  font-size checkbox-font-size
  padding v-gap-sm h-gap-md
  border 1px solid checkbox-border-color
  border-radius checkbox-border-radius
  box-sizing border-box
  overflow hidden
  &.is-checked
    color checkbox-active-color
    border-color checkbox-active-border-color
    &.is-disabled
      color checkbox-active-color
      border-color checkbox-active-border-color
      opacity 0.6
  &.is-disabled
    color checkbox-disabled-color
    border-color checkbox-disabled-color
  .md-tag
    position absolute
    top 0
    right 0
    .quarter-bg
      background-color checkbox-active-color
</style>